<template>
  <Financial
    title="结算单管理"
    add-btn-text="新增结算单"
    :columns="columns"
    :get-page-url="Api.settlementPage"
    :cud-url="Api.settlement"
    create-title="新增结算单"
    update-title="编辑结算单"
    delete-message="确认删除该结算单吗？"
    :model="model"
    :model-form-setting="modelFormSetting"
    :detail-modal-options="detailModalOptions"
    review-api-key="settlementReview"
    nullify-api-key="settlementNullify"
    @before-update-model="beforeUpdateModel"
    @before-ok="beforeOk"
  >
  </Financial>
</template>
<script setup lang="ts">
import { ref } from "vue";
import Financial from "/@/views/common/Financial/Financial.vue";
import { TableColumnProps } from "ant-design-vue";
import { Api } from "/@/api/main/financial";
import { DetailModalOptions, FinancialItem, InvoiceType, PayOpType } from "/@/api/main/financial/models";
import { CURDAction, CURDModalEvent, FormItemComponentType, FormItemData } from "/@/components/CURDDialog/models";
import { enumToOptions, getLabelByValueFromEnum, handleDateRowRender } from "/@/utils/common";
import { getSupplierList } from "/@/api/main/pis";
import dayjs from "dayjs";
import { ReceiptStatus } from "/@/api/main/pis/models";
import { SelectOptionItem } from "/@/types/antd";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";

const columns = ref<TableColumnProps<FinancialItem>[]>([
  {
    title: "结算单号",
    dataIndex: "settlementNo",
  },
  {
    title: "供应商",
    dataIndex: "supplierName",
  },
  {
    title: "对账账期",
    dataIndex: "reconciliationPeriod",
  },
  {
    title: "对账单号",
    dataIndex: "reconciliationOrderNo",
  },
  {
    title: "拟结算日期",
    dataIndex: "proposedSettlementDate",
    customRender: handleDateRowRender,
  },
  {
    title: "发票号码",
    dataIndex: "invoiceNum",
  },
  {
    title: "开票日期",
    dataIndex: "invoiceDate",
    customRender: handleDateRowRender,
  },
  {
    title: "结算数量",
    dataIndex: "quantity",
  },
  {
    title: "结算金额",
    dataIndex: "amount",
  },
  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "制单信息",
    dataIndex: "createInfo",
  },
  {
    title: "审核信息",
    dataIndex: "reviewInfo",
  },
  {
    title: "操作",
    key: "oper",
    fixed: "right",
  },
]);

const model = ref<Partial<FinancialItem>>({});

const modelFormSetting = ref<FormItemData<Partial<FinancialItem>>[]>([
  {
    key: "opType",
    type: FormItemComponentType.SELECT,
    props: {
      options: enumToOptions(PayOpType, "payOpType"),
    },
    required: true,
  },
  {
    key: "_payRecDate",
    type: FormItemComponentType.DATEPICKER,
    label: "收付款日期",
    required: true,
    props: {
      valueFormat: null,
    },
  },
  {
    key: "settlementOrderNo",
  },
  {
    key: "supplierId",
    label: "供应商",
    type: FormItemComponentType.SELECT,
    props: {
      options: [],
    },
    async getData() {
      const data = await getSupplierList();
      return data
        ? data.map((item) => ({
            label: item.name,
            value: item.id,
            key: item.id,
          }))
        : [];
    },
    required: true,
  },
  {
    key: "invoiceId",
  },
  {
    key: "payRecAmount",
    type: FormItemComponentType.NUMBER,
  },
  {
    key: "payRecMethod",
    type: FormItemComponentType.SELECT,
    props: {
      options: [{ label: "银行转账", value: 0 }],
    },
  },
  {
    key: "voucherNum",
  },
  {
    key: "voucherUrl",
    label: "收付款单图片",
    type: FormItemComponentType.IMGUPLOAD,
  },
  {
    key: "remark",
    label: "备注",
    type: FormItemComponentType.TEXTAREA,
  },
]);

function beforeUpdateModel(record: FinancialItem) {}

function beforeOk({ action, model }: CURDModalEvent<Partial<FinancialItem>>) {
  if (model) {
  }
}
/**
 *
 */
const detailModalOptions = ref<DetailModalOptions>({
  triggerKeys: ["settlementNo"],
  title: "收付款单详情",
  desKeys: [
    "opType",
    "orderNo",
    "settlementOrderNo",
    "supplierId",
    "invoiceId",
    "payRecDate",
    "payRecAmount",
    "payRecMethod",
    "voucherNum",
  ],
  loading: false,
  data: {},
});
function showDetail(record: FinancialItem) {
  detailModalOptions.value.data = record;
}
</script>
